<template>
	<view class="content">
		<view class="content-message">


			<!-- 区域选择 -->
			<view class="uni-list">
				<view class="uni-input">
					<view v-if="showMap">
						<selectLoc :showMap="showMap" @close="closeLoc" @confirm="confirmLoc"></selectLoc>
					</view>
					<view class="text" @click="showMap=true">{{locationName}}</view>
					<view class="icon">

					</view>


				</view>

			</view>

			<!-- 背景 -->
			<view class="contentBac">


				<!-- 轮播图 -->

				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
						<!-- 轮播1 -->
						<swiper-item>
							<view class="lunbo1"></view>
						</swiper-item>
						<!-- 轮播2 -->
						<swiper-item>
							<view class="lunbo2"></view>
						</swiper-item>
						<!-- 轮播3 -->
						<swiper-item>
							<view class="lunbo3"></view>
						</swiper-item>
					</swiper>
				</view>
			</view>


			<!-- 滚动通知 -->
			<view>
				<u-notice-bar class="notification" bgColor="#fff" color="#080" speed="60px" :text="list"
					url="../../static/laba.png"></u-notice-bar>
			</view>

			<!-- 宫格菜单 -->
			<view class="menu">
				<view class="menulist" @click="goToappointment(0)">
					<view class="hot">
						热门
					</view>
					<view class="menuicont">
						<image src="../../static/zhixiang.svg" mode=""></image>
					</view>
					<view class="menutext">
						<text>纸箱</text>
					</view>
				</view>
				<view class="menulist" @click="goToappointment(1)">
					<view class="menuicont">
						<image src="../../static/jinshu.png" mode=""></image>
					</view>
					<view class="menutext">
						<text>金属</text>
					</view>
				</view>

				<view class="menulist" @click="goToappointment(2)">
					<view class="menuicont">
						<image src="../../static/shuiping.svg" mode=""></image>
					</view>
					<view class="menutext">
						<text>水瓶</text>
					</view>
				</view>

				<view class="menulist" @click="goToappointment(3)">
					<view class="menuicont">
						<image src="../../static/yifu.svg" mode=""></image>
					</view>
					<view class="menutext">
						<text>纺织物</text>
					</view>
				</view>

				<view class="menulist" @click="goToappointment(4)">
					<view class="hot">
						上新
					</view>
					<view class="menuicont">
						<image src="../../static/bingxiang.png" mode=""></image>
					</view>
					<view class="menutext">
						<text>家电</text>
					</view>
				</view>

				<view class="menulist" @click="goToappointment(5)">
					<view class="menuicont">
						<image src="../../static/qita.svg" mode=""></image>
					</view>
					<view class="menutext">
						<text>其它</text>
					</view>
				</view>

				<view class="menulist" @click="goToguide()">
					<view class="menuicont">
						<image src="../../static/fenlei.png" mode=""></image>
					</view>
					<view class="menutext">
						<text>分类指南</text>
					</view>
				</view>

				<view class="menulist" @click="goToshop()">
					<view class="hot">
						热门
					</view>
					<view class="menuicont">
						<image src="../../static/shangcheng.png" mode=""></image>
					</view>
					<view class="menutext">
						<text>积分商城</text>
					</view>
				</view>

			</view>

			<!-- 预约回收 -->
			<view class="yuyue">
				<view class="yuyuezhutitle">
					<text>预约下单即可免费上门回收、代扔</text>
				</view>
				<view class="yuyuefutitle">
					<text>旧家电、旧纸箱、旧衣物、生活垃圾等</text>
				</view>
				<view class="button">
					<button @click="goToappointment(0)">立即下单</button>
				</view>
			</view>
			<!-- 预约流程 -->
			<view class="flow">
				<view class="flowtext">
					<text class="num">1</text>
					<text class="text">在线预约</text>
				</view>
				<view class="flowtext">
					<text class="num">2</text>
					<text class="text">免费上门</text>
				</view>
				<view class="flowtext">
					<text class="num">3</text>
					<text class="text">完成订单</text>
				</view>
				<view class="flowtext">
					<text class="num">4</text>
					<text class="text">结算积分</text>
				</view>
			</view>

			<!-- 平台数据 -->
			<view class="data">
				<view class="datatitle">
					<text class="left"></text>
					<text class="right">平台数据</text>
				</view>
				<view class="datatext">
					<view class="datalist">
						<view class="num">
							<text>12345人</text>
						</view>
						<view class="text">
							<text>参与人数</text>
						</view>
					</view>
					<view class="datalist">
						<view class="num">
							<text>4725吨</text>
						</view>
						<view class="text">
							<text>可回收垃圾重量</text>
						</view>
					</view>
					<view class="datalist">
						<view class="num">
							<text>428.5吨</text>
						</view>
						<view class="text">
							<text>生活垃圾重量</text>
						</view>
					</view>

				</view>

			</view>


			<!-- 玩法推荐 -->



			<Tabbar cureentPage='index'></Tabbar>
		</view>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue'
	import OrderApi from '@/common/FindingService/OrderApi.js';
	import selectLoc from '../../components/selectLoc/selectLoc.vue'
	export default {
		components: {
			selectLoc,
			Tabbar
		},
		data() {
			return {
				showMap: false,
				lat: '',
				lng: '',
				prov: '',
				city: '',
				area: '',
				address: '',
				title: 'picker',
				index: '',
				autoplay: true,
				interval: 2000,
				duration: 500,
				text1: '用户1进行了垃圾回收',
				list: '',
				locationName: '请选择当前位置'


			}
		},
		components: {
			Tabbar
		},
		mounted() {
			// 全局参数userId
			OrderApi.queryNewOrder().then(res => {
				this.list = res.data.data.userPhone
				this.list = '用户' + this.list + '预约上门回收'
				console.log('this.list', this.list)

			})

		},
		created() {
			this.userId = uni.getStorageSync('userId');
			this.clickUser()

		},
		computed: {

		},

		methods: {
			//加载用户
			clickUser() {
				OrderApi.queryUser(this.userId).then(res => {
					this.locationName = res.data.data.locationName

					console.log('用户地址', this.locationName)
					uni.setStorageSync('updatedUser', this.newUser);

				})
			},
			//定位
			confirmLoc(res) {
				this.showMap = false;
				this.lat = res.lat;
				this.lng = res.lng;
				this.prov = res.province;
				this.city = res.city;
				this.city = res.area;
				this.address = res.district;
				console.log('选择的信息', res);
				//存储用户定位信息

				let params = {
					id: this.userId,
					phone: "",
					locationName: this.city + this.area,
					latitude: this.lat,
					longitude: this.lng

				}
				OrderApi.putUserGPS(params).then(res => {

					console.log('加入成功', res)
					uni.navigateTo({
						url: '/pages/index/index'
					})

				})



			},

			closeLoc() {
				this.showMap = false;
			},
			goToshop() {
				// console.log('全局用户', this.user)
				uni.navigateTo({
					url: '/pages/shopping/shopping'
				});
			},
			goToguide() {
				uni.navigateTo({
					url: '/pages/guide/sort/sort'
				});

			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			goToappointment(index) {

				uni.navigateTo({
					url: '/pages/appointment/appointment?index=' + index
				});


			}
		}
	}
</script>

<style lang="scss">
	.menulist {
		position: relative;

		.hot {
			position: absolute;
			font-size: 10px;
			right: -10rpx;
			top: -10rpx;
			background-color: #E85A35;
			color: white;
			width: 90rpx;
			height: 34rpx;
			border-radius: 17rpx;
			z-index: 99999;
			animation: hotAnimation 1.5s infinite alternate;
			/* 定义动画效果 */
			transform-origin: center;
			/* 调整缩放原点为按钮中心 */
		}

	}

	@keyframes hotAnimation {
		0% {
			transform: scale(1);
			/* 初始状态，按钮正常大小 */
		}

		50% {
			transform: scale(1.1);
			/* 中间状态，按钮放大到1.2倍 */
		}

		100% {
			transform: scale(1);
			/* 结束状态，按钮恢复正常大小 */
		}
	}

	.button {
		animation: buttonAnimation 2s infinite alternate;
		/* 定义动画效果 */
		transform-origin: center;
		/* 调整缩放原点为按钮中心 */
	}

	@keyframes buttonAnimation {
		0% {
			transform: scale(1);
			/* 初始状态，按钮正常大小 */
		}

		50% {
			transform: scale(1.05);
			/* 中间状态，按钮放大到1.2倍 */
		}

		100% {
			transform: scale(1);
			/* 结束状态，按钮恢复正常大小 */
		}
	}

	.u-demo-block {
		margin-top: 70rpx;
		margin-bottom: 140rpx;
	}

	.data {

		width: 92%;
		margin-top: 120rpx;


		.datatitle {


			.left {
				padding: 10rpx;
				background-color: aquamarine;
				margin-right: 10rpx;
			}
		}

		.datatext {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			background-color: aliceblue;
			margin-bottom: 100rpx;

			.datalist {
				margin: 0 10rpx;
				padding: 10rpx;
				text-align: center;

				.num {
					margin: 20rpx 0;
					color: #7DCEA0;
				}

				.text {
					margin: 20rpx 0;
				}
			}
		}
	}

	.flow {
		display: flex;
		margin-top: 20rpx;

		.flowtext {
			margin-left: 10rpx;
			font-size: 10px;

			.num {
				border-radius: 50%;
				padding: 0 5px;
				background-color: aquamarine;
				margin-right: 10rpx;

			}
		}
	}

	.yuyue {
		margin-top: 60rpx;

		.yuyuezhutitle {
			margin-bottom: 30rpx;

			text {
				font-size: 23px;
				font-weight: bold;
			}
		}

		.yuyuefutitle {
			text-align: center;
			margin-bottom: 30rpx;

		}

		button {
			background-color: #93C9C9;
		}
	}

	uni-image>img {
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
	}

	.menu {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 90%;
		align-content: center;
		align-items: center;

		.menulist {
			width: 25%;
			align-content: center;
			align-items: center;
			text-align: center;
			margin-top: 30rpx;

			.menuicont {
				image {
					width: 30px;
					height: 30px;

				}
			}
		}
	}

	.notification {
		width: 500rpx;
	}

	.swiper {
		margin: 0 auto;
		width: 95%;
		height: 320rpx;
	}

	.lunbo1 {
		border-radius: 7px;
		background-repeat: no-repeat;
		background-position: center;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		height: 310rpx;
		background-size: cover;
		background-image: url(https://n.sinaimg.cn/spider20220113/42/w954h688/20220113/3fe8-432e653b854e559e9017f0fb984f4284.jpg);
	}

	.lunbo2 {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		border-radius: 7px;
		height: 310rpx;
		background-size: cover;
		background-image: url(https://img2.baidu.com/it/u=559701909,109259594&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
	}

	.lunbo3 {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		border-radius: 7px;
		height: 310rpx;
		background-size: cover;
		background-image: url(https://img2.baidu.com/it/u=3153703512,2348674946&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500);
	}

	.uni-list {
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 999999;
		background-color: #9ED9D2;

	}

	.uni-input {
		display: flex;
		align-items: center;
		color: #000;
		font-size: 16px;
		font-weight: bold;
		background-color: #9ED9D2;
		height: 120rpx;
		width: 100%;




		.text {
			display: block;
			margin-left: 50rpx;
		}

		.icon {
			margin-left: 20rpx;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-bottom: 30rpx solid #fff;
			transform: rotate(180deg);
		}


	}

	.content-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}



	.contentBac {
		// z-index: 99999;
		width: 100%;
		height: 320rpx;
		background-color: #9ED9D2;
		margin: 0;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>